<template>
  <div
    class="content-wrapper"
    style="border-bottom: 1px solid rgba(228, 230, 235, 0.5)"
  >
    <div class="content-main">
      <div class="title-row">
        <a
          href="###"
          target="_blank"
          :title="title"
          class="title"
        >{{title}}</a>
      </div>
      <div class="abstract">
        <a
          href="###"
          target="_blank"
        >
          <div>
            {{abstract}}
          </div>
        </a>
      </div>
      <ul class="action-list jh-timelin-action-area">
        <li class="item view"><i></i><span>{{views}}</span></li>
        <li
          class="item like"
          ref="likeBlog"
          @mouseup="likeTheBlog"
        ><i></i><span>{{likesCopy}}</span></li>
        <li class="item comment"><i></i><span>{{comments}}</span></li>
      </ul>
    </div>
    <img
      class="lazy thumb"
      src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca3b489a784f4c8c8fb82ab9142faa33~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?"
      alt="react团队最近在忙啥"
    >
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    abstract: String,
    imageSrc: String,
    views: Number,
    likes: Number,
    comments: Number,
  },
  data() {
    return {
      isLike: false,
      likesCopy: this.likes,
    };
  },
  methods: {
    likeTheBlog() {
      const current = this.$refs.likeBlog;
      if (!this.isLike) {
        current.classList = "item liked";
        this.isLike = true;
        this.likesCopy++;
        // 这块还需要数值 +1
        // 通知服务器更新数据
      } else {
        current.classList = "item like";
        this.isLike = false;
        this.likesCopy--;
        // 这块还需要数值 -1
        // 通知服务器更新数据
      }
    },
  },
};
</script>

<style lang="less">
.content-wrapper {
  display: flex;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e6eb;
  margin-top: 10px;
  width: 100%;
}
.title-row {
  display: flex;
  margin-bottom: 8px;
}
.title {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: #1d2129;
  width: 100%;
  display: -webkit-box;
  //   overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
}
/* a {
    text-decoration: none;
    cursor: pointer;
    color: #909090;
    background-color: transparent;
} */

ul {
  padding: 0;
  margin: 0;
}

.action-list {
  display: flex;
  align-items: center;
}
li {
  list-style: none;
}
.action-list > .item {
  position: relative;
  margin-right: 20px;
  font-size: 13px;
  line-height: 20px;
  color: #4e5969;
  flex-shrink: 0;
}
.action-list > .item {
  display: flex;
  align-items: center;
}
/* .action-list>.item.view i {
    background-image: url('../../assets/images/view.png');
} */

.view {
  i {
    background-image: url("../../assets/images/view.png");
  }
  span {
    color: #4e5969;
  }
}

.like:hover {
  i {
    background-image: url("../../assets/images/toLike.png");
  }
  span {
    color: #007fff;
  }
}

.like {
  i {
    background-image: url("../../assets/images/like.png");
  }
  span {
    color: #4e5969;
  }
}

.liked {
  i {
    background-image: url("../../assets/images/liked.png");
  }
  span {
    color: #007fff;
  }
}
.views {
  background-image: url("../../assets/images/view.png");
}

.comment:hover {
  i {
    background-image: url("../../assets/images/toComment.png");
  }
  span {
    color: #007fff;
  }
}

.comment {
  i {
    background-image: url("../../assets/images/comment.png");
  }
  span {
    color: #4e5969;
  }
}

.action-list > .item i {
  display: block;
  width: 16px;
  height: 16px;
  background-size: 100%;
}
.action-list > .item span {
  margin-left: 4px;
}

.abstract {
  margin-bottom: 10px;
}

.abstract a {
  color: #86909c;
  font-size: 13px;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.thumb {
  flex: 0 0 auto;
  width: 120px;
  height: 80px;
  margin-left: 24px;
  background-color: #fff;
  border-radius: 2px;
}
.lazy {
  position: relative;
  -o-object-fit: cover;
  object-fit: cover;
}
</style>